<template>
	<div class="easyd-weixin-Box app_page" id="homeIndex">
		<div class="app_box_content app_list_box top_sell_tab MARGIN_BOTTOM_10" v-if="tempSell != ''">
			<div class="app_box_content_left" style="max-width: 250px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
				当前查看销售“{{tempSellName}}”
			</div>
			<div class="app_box_content_right C4" @click="clearSellDetail()">
				返回
			</div>
		</div>
		<mt-actionsheet class="actionsBox" :actions="actions" v-model="sheetVisible"></mt-actionsheet>
		<div class="top_box app_box_flex MARGIN_BOTTOM_10">
			<div class="app_box" @click="addClient()">
				<img src="../../../../static/homeImages/luru.png" />
				<p class="T1">客户录入</p>
			</div>
			<div class="app_box" @click="clientFollow('kehugenjin',homeData.waitForFlowingCount,'客户跟进')">
				<img src="../../../../static/homeImages/genjin.png" />
				<p class="T1">客户跟进</p>
				<div class="sup" v-if="homeData.waitForFlowingCount>0">{{homeData.waitForFlowingCount}}</div>
			</div>
			<div class="app_box" @click="objectionList()">
				<img src="../../../../static/homeImages/shouhou.png" />
				<p class="T1">异议处理</p>
				<div class="sup" v-if="homeData.waitingDealFeedbackCount>0">{{homeData.waitingDealFeedbackCount}}</div>
			</div>
		</div>

		<div class="app_list_box MARGIN_BOTTOM_10">
			<div class="app_box_content" @click="afterSale()">
				<div class="app_box_content_left">
					售后服务
				</div>
				<div class="app_box_content_right">
					<span class="T3 C4" v-if="homeData.waitingForServiceCount>0">你有{{homeData.waitingForServiceCount}}家商户需要服务</span>
					<span class="fa fa-angle-right fa-lg C2"></span>
				</div>
			</div>
			<div class="app_box_content" @click="orderList()">
				<div class="app_box_content_left">
					订单记录
				</div>
				<div class="app_box_content_right">
					<span class="fa fa-angle-right fa-lg C2"></span>
				</div>
			</div>
			<div class="app_box_content" @click="customerPool()">
				<div class="app_box_content_left">
					客户库
				</div>
				<div class="app_box_content_right">
					<span class="fa fa-angle-right fa-lg C2"></span>
				</div>
			</div>
			<div class="sell_information C2">
				<div class="sell_information_item app_box_flex">
					<div class="app_box_flex_1" @click="customerType('A')">
						<p>A
							<span class="C4 T4">({{homeData.setACount}}人)</span>
						</p>
					</div>
					<div class="app_box_flex_1" @click="customerType('B')">
						<p>B
							<span class="C4 T4">({{homeData.setBCount}}人)</span>
						</p>
					</div>
					<div class="app_box_flex_1" @click="customerType('C')">
						<p>C
							<span class="C4 T4">({{homeData.setCCount}}人)</span>
						</p>
					</div>
				</div>
			</div>
		</div>

		<div class="app_list_box MARGIN_BOTTOM_10">
			<div class="app_box_title T1">
				销售概况
			</div>
			<div class="sell_information C2">
				<div class="sell_information_item app_box_flex">
					<div class="app_box_flex_1" @click="clientFollow('jinrixinzeng',homeData.newCustomerTodayCount,'今日新增')">
						<p>{{homeData.newCustomerTodayCount}}</p>
						<p>今日新增</p>
					</div>
					<div class="app_box_flex_1" @click="clientFollow('jinrigenjin',homeData.followUpTodayCount,'今日跟进')">
						<p>{{homeData.followUpTodayCount}}</p>
						<p>今日跟进</p>
					</div>
					<div class="app_box_flex_1" @click="clientFollow('jinrichengjiao',homeData.dealTodayCount,'今日成交')">
						<p>{{homeData.dealTodayCount}}</p>
						<p>今日成交</p>
					</div>
				</div>
				<div class="sell_information_item app_box_flex">
					<div class="app_box_flex_1" @click="totalNumber()">
						<p>{{homeData.totalNumberCount}}</p>
						<p>总人数</p>
					</div>
					<div class="app_box_flex_1" @click="following()">
						<p>{{homeData.catchingUpCount}}</p>
						<p>跟进中</p>
					</div>
					<div class="app_box_flex_1" @click="hasBought()">
						<p>{{homeData.dealConcludedCount}}</p>
						<p>已成交</p>
					</div>
				</div>
			</div>
		</div>

		<div class="app_list_box MARGIN_BOTTOM_20">
			<div class="app_box_content">
				<div class="app_box_content_left">
					销售业绩统计表&nbsp;&nbsp;<span class="C4 T4">({{month}}月)</span>
				</div>
				<div class="app_box_content_right" @click="changeView()">
					更多
					<span class="fa fa-angle-right C4"></span>
				</div>
			</div>
			<div class="app_box_content_list" v-for="item in salesData" @click="sellDetail(item)">
				<div class="app_box_flex">
					<div class="app_box_content_left">
						{{item.u_nickname}}<span v-if="item.u_type == 3 && item.u_is_manager == 1 && item.is_group_leader == 0">-组</span>
					</div>
					<div class="app_box_content_right">
						销售总金额：{{item.totalSales}}元
					</div>
				</div>
				<div class="app_box_flex C4 T3">
					<div class="app_box_flex_1">
						阅读：{{item.salesBeReadCount}}人
					</div>
					<div class="app_box_flex_1">
						新增：{{item.numberAddedInTheMonth}}家
					</div>
					<div class="app_box_flex_1" style="text-align: center;">
						跟进：{{item.totalMonthlyFollowUp}}家
					</div>
					<div class="app_box_flex_1" style="text-align: right;">
						成交：{{item.totalMonthlyTurnover}}单
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import { mapState, mapMutations } from "vuex";

	export default {

		data() {
			return {
				dateInfo: this.$common.getNowDateInfo(),
				month: 0,
				actions: [],
				sheetVisible: false,
				//              tempSell: '',
				//              tempSellName: ''
			};
		},
		computed: {
			...mapState({
				homeData: state => state.HomeModule.homeData,
				salesData: state => state.HomeModule.salesData,
				tempSell: state => state.HomeModule.tempSell,
				tempSellName: state => state.HomeModule.tempSellName,
				tempSellAll: state => state.HomeModule.tempSellAll,
			}),
		},
		mounted() {

			this.initActionSheet();
			this.month = this.dateInfo.month;

			if(!this.$userData.isLogin()) {
				this.$easyUtil.GO(this, '/login');
			} else {
				//              this.$store.commit("HomeModule/updateTempSell", '');
				//              this.$store.commit("HomeModule/updateTempSellName", '');
				this.initData(this.tempSell);
			}

		},
		methods: {

			initActionSheet() {

				var tempArr = [];
				var that = this;
				for(var i = 1; i <= 12; i++) {
					tempArr.push({
						id: i,
						name: i + "月",
						method: function(item) {
							console.log("月份选择返回参数")
							console.log(item)
							that.month = item.id;
							that.initData(this.tempSell)
						}
					})
				}

				this.actions = tempArr;

			},
			initData(temp_u_id) {

				var uids = this.$userData.getUID();
				var isRoot = '';
				if(temp_u_id) {
					uids = temp_u_id;

					if(this.tempSellAll.is_group_leader == '1') {
						isRoot = "/is_manager/0" +
							"/u_type/" + this.tempSellAll.u_type +
							"/u_osid/" + this.tempSellAll.u_master_osid
					} else {
						isRoot = "/is_manager/" + this.tempSellAll.u_is_manager +
							"/u_type/" + this.tempSellAll.u_type +
							"/u_osid/" + this.tempSellAll.u_master_osid
					}
				} else {
					isRoot = "/is_manager/" + this.$userData.getIsManager() +
						"/u_type/" + this.$userData.getOsType() +
						"/u_osid/" + this.$userData.getOsid()
				}

				//是否是超管
				//              var isRoot = "/is_manager/0";
				//              if(this.$userData.getUID()==1){
				//              	isRoot = "/is_manager/1";
				//              }

				this.$easyUtil.startLoading(this);
				this.$http.getHttp(
					this.$API.apiHomeData + "/u_id/" + uids + "/year/" + this.dateInfo.year + "/month/" + this.month + isRoot,
					rs => {
						this.$easyUtil.endLoading(this);
						console.log(rs);
						this.$store.commit("HomeModule/updateHomeData", rs);
						this.salesPerformanceStatistics(temp_u_id);
					}
				);
			},
			salesPerformanceStatistics(uid) {
				var urls = '';
				if(uid) {
					urls = this.$API.getSalesPerformanceStatisticsList +
						"/u_id/" + this.tempSellAll.u_id +
						"/os_id/" + this.tempSellAll.u_master_osid +
						"/year/" + this.dateInfo.year +
						"/month/" + this.month +
						"/is_manager/" + this.tempSellAll.u_is_manager +
						"/u_type/" + this.tempSellAll.u_type +
						"/u_leader/" + this.tempSellAll.u_leader;
				} else {
					urls = this.$API.getSalesPerformanceStatisticsList +
						"/u_id/" + this.$userData.getUID() +
						"/os_id/" + this.$userData.getOsid() +
						"/year/" + this.dateInfo.year +
						"/month/" + this.month +
						"/is_manager/" + this.$userData.getIsManager() +
						"/u_type/" + this.$userData.getOsType() +
						"/u_leader/" + this.$userData.getLeader();
				}
				this.$http.getHttp(
					urls,
					rs => {
						console.log(rs);
						this.$store.commit("HomeModule/updateSalesData", rs.salesmanList);
					})
			},
			clearSellDetail(item) {
				this.$store.commit("HomeModule/updateTempSell", '');
				this.$store.commit("HomeModule/updateTempSellName", '');
				this.$store.commit("HomeModule/updateTempSellAll", {});
				this.initData(this.tempSell);
			},
			sellDetail(item) {
				if(this.$userData.getOsType() == 0 || this.$userData.getIsManager() == 1) {
					document.getElementById('homeIndex').scrollTop = 0;
					this.$store.commit("HomeModule/updateTempSell", item.u_id);
					this.$store.commit("HomeModule/updateTempSellName", item.u_nickname);

					this.$store.commit("HomeModule/updateTempSellAll", item);
					this.initData(this.tempSell);
				} else {
					console.log('权限不足')
				}
			},
			changeView() {
				this.sheetVisible = !this.sheetVisible;
			},
			//跳转客户录入
			addClient(e) {
				this.$easyUtil.GO(this, '/addClient')
			},
			totalNumber() {
				this.$easyUtil.GO(this, '/customerPool')
			},
			following() {
				this.$easyUtil.GO(this, '/customerPool', {
					condition: 1
				})
			},
			hasBought() {
				this.$easyUtil.GO(this, '/customerPool', {
					condition: 2
				})
			},
			//跳转客户跟进
			clientFollow(source, count, itemName) {
				if(parseInt(count) > 0) {
					this.$router.push({
						path: '/clientFollow',
						query: {
							u_id: this.$userData.getUID(),
							source: source,

						}
					})
				} else {
					this.$easyUtil.alert(this, "温馨提示", itemName + "暂无数据")
				}

			},
			//跳转异议处理
			objectionList(e) {
				this.$easyUtil.GO(this, '/objectionList');
			},
			//跳转售后服务
			afterSale(e) {
				this.$easyUtil.GO(this, '/afterSale');
			},
			//跳转订单记录
			orderList(e) {
				this.$easyUtil.GO(this, '/orderList');
			},
			//跳转客户池
			customerPool(e) {
				this.$easyUtil.GO(this, '/customerPool');
			},
			//跳转客户类型库
			customerType(type) {
				this.$easyUtil.GO(this, '/customerType', {
					type: type
				});
			},
		}
	};
</script>

<style lang="stylus" scoped>
	@import '~PUBLIC_CSS';
	.top_sell_tab {
		background: #FBD415;
		color: #ff0000;
	}
	
	.top_sell_tab .app_box_content_left {
		max-width: 250px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.top_box {}
	
	.top_box .app_box {
		margin-right: 10px;
		position relative
	}
	
	.top_box .app_box .sup {
		position: absolute;
		top: 5px;
		right: 10px;
		border-radius: 50%;
		border: 1px solid #ff0000;
		height: 16px;
		width: 16px;
		text-align: center;
		line-height: 16px;
		color: #ff0000;
	}
	
	.top_box .app_box:last-child {
		margin-right: 0px;
	}
	
	.top_box .app_box img {
		width: 35%;
		margin: 0 auto;
		display: block;
		padding-bottom: 5px;
	}
	
	.top_box .app_box p {
		text-align: center;
	}
	
	.sell_information {}
	
	.sell_information .sell_information_item .app_box_flex_1 {
		text-align: center;
		padding: 10px;
		border-right: 1px solid #f6f6f6;
		border-bottom: 1px solid #f6f6f6;
	}
</style>